<template>
  <view class="tab-test-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="handleBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">Tab栏测试</text>
    </view>

    <!-- 主要内容 -->
    <view class="content">
      <!-- 流式动画Tab栏 -->
      <view class="section">
        <text class="section-title">流式动画Tab栏</text>
        <view class="flow-tab-container">
          <view class="flow-tab-indicator-container" :style="indicatorContainerStyle">
            <view class="flow-tab-white-bg"></view>
            <view class="flow-tab-indicator"></view>
          </view>
          <view 
            class="flow-tab-item" 
            v-for="(tab, index) in flowTabs" 
            :key="index"
            :class="{ active: activeFlowTab === index }"
            @click="handleFlowTabClick(index)"
          >
            <text class="flow-tab-icon">{{ tab.icon }}</text>
            <text class="flow-tab-text">{{ tab.name }}</text>
          </view>
        </view>
        <view class="tab-content">
          <text class="content-text">{{ flowTabs[activeFlowTab].content }}</text>
        </view>
      </view>

      <!-- 基础Tab栏 -->
      <view class="section">
        <text class="section-title">基础Tab栏</text>
        <view class="tab-container">
          <view 
            class="tab-item" 
            v-for="(tab, index) in basicTabs" 
            :key="index"
            :class="{ active: activeBasicTab === index }"
            @click="handleBasicTabClick(index)"
          >
            <text class="tab-text">{{ tab.name }}</text>
          </view>
        </view>
        <view class="tab-content">
          <text class="content-text">{{ basicTabs[activeBasicTab].content }}</text>
        </view>
      </view>

      <!-- 图标Tab栏 -->
      <view class="section">
        <text class="section-title">图标Tab栏</text>
        <view class="tab-container icon-tabs">
          <view 
            class="tab-item icon-tab" 
            v-for="(tab, index) in iconTabs" 
            :key="index"
            :class="{ active: activeIconTab === index }"
            @click="handleIconTabClick(index)"
          >
            <text class="tab-icon">{{ tab.icon }}</text>
            <text class="tab-text">{{ tab.name }}</text>
          </view>
        </view>
        <view class="tab-content">
          <text class="content-text">{{ iconTabs[activeIconTab].content }}</text>
        </view>
      </view>

      <!-- 滑动Tab栏 -->
      <view class="section">
        <text class="section-title">滑动Tab栏</text>
        <view class="scroll-tab-container">
          <scroll-view class="scroll-tabs" scroll-x="true">
            <view class="scroll-tab-list">
              <view 
                class="scroll-tab-item" 
                v-for="(tab, index) in scrollTabs" 
                :key="index"
                :class="{ active: activeScrollTab === index }"
                @click="handleScrollTabClick(index)"
              >
                <text class="scroll-tab-text">{{ tab.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="tab-content">
          <text class="content-text">{{ scrollTabs[activeScrollTab].content }}</text>
        </view>
      </view>

      <!-- 底部Tab栏 -->
      <view class="section">
        <text class="section-title">底部Tab栏</text>
        <view class="bottom-tab-container">
          <view 
            class="bottom-tab-item" 
            v-for="(tab, index) in bottomTabs" 
            :key="index"
            :class="{ active: activeBottomTab === index }"
            @click="handleBottomTabClick(index)"
          >
            <text class="bottom-tab-icon">{{ tab.icon }}</text>
            <text class="bottom-tab-text">{{ tab.name }}</text>
          </view>
        </view>
        <view class="tab-content">
          <text class="content-text">{{ bottomTabs[activeBottomTab].content }}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-section">
        <button class="action-btn primary" @click="handleReset">重置所有Tab</button>
        <button class="action-btn secondary" @click="handleRandom">随机切换</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 流式动画Tab数据
const flowTabs = ref([
  { name: '首页', icon: '🏠', content: '流式动画Tab栏首页内容，具有平滑的切换动画效果。' },
  { name: '发现', icon: '🔍', content: '流式动画Tab栏发现内容，背景会流动到新位置。' },
  { name: '消息', icon: '💬', content: '流式动画Tab栏消息内容，体验流畅的切换动画。' },
  { name: '我的', icon: '👤', content: '流式动画Tab栏我的内容，现代化的交互体验。' }
])

// 基础Tab数据
const basicTabs = ref([
  { name: '首页', content: '这是首页的内容，展示基础Tab栏的功能。' },
  { name: '分类', content: '这是分类页面的内容，包含各种分类信息。' },
  { name: '我的', content: '这是个人中心的内容，显示用户信息。' }
])

// 图标Tab数据
const iconTabs = ref([
  { name: '首页', icon: '🏠', content: '首页图标Tab，使用🏠图标。' },
  { name: '搜索', icon: '🔍', content: '搜索图标Tab，使用🔍图标。' },
  { name: '消息', icon: '💬', content: '消息图标Tab，使用💬图标。' },
  { name: '设置', icon: '⚙️', content: '设置图标Tab，使用⚙️图标。' }
])

// 滑动Tab数据
const scrollTabs = ref([
  { name: '推荐', content: '推荐内容，滑动Tab栏的第一个选项。' },
  { name: '热门', content: '热门内容，滑动Tab栏的第二个选项。' },
  { name: '最新', content: '最新内容，滑动Tab栏的第三个选项。' },
  { name: '关注', content: '关注内容，滑动Tab栏的第四个选项。' },
  { name: '收藏', content: '收藏内容，滑动Tab栏的第五个选项。' },
  { name: '历史', content: '历史内容，滑动Tab栏的第六个选项。' }
])

// 底部Tab数据
const bottomTabs = ref([
  { name: '首页', icon: '🏠', content: '底部Tab栏首页内容。' },
  { name: '发现', icon: '🔍', content: '底部Tab栏发现内容。' },
  { name: '消息', icon: '💬', content: '底部Tab栏消息内容。' },
  { name: '我的', icon: '👤', content: '底部Tab栏我的内容。' }
])

// 当前激活的Tab索引
const activeFlowTab = ref(0)
const activeBasicTab = ref(0)
const activeIconTab = ref(0)
const activeScrollTab = ref(0)
const activeBottomTab = ref(0)

// Tab栏容器宽度
const containerWidth = ref(0)

// 页面加载完成后获取Tab栏宽度
onMounted(() => {
  // 使用uni.createSelectorQuery获取Tab栏容器的实际宽度
  const query = uni.createSelectorQuery()
  query.select('.flow-tab-container').boundingClientRect((rect) => {
    if (rect) {
      containerWidth.value = rect.width
      console.log('Tab栏实际宽度:', rect.width, 'px')
    }
  }).exec()
})

// 流式动画指示器容器样式计算
const indicatorContainerStyle = computed(() => {
  const tabCount = flowTabs.value.length
  const tabWidth = containerWidth.value / tabCount // 每个Tab的宽度
  const offset = 20 // 增加偏移量，用于微调位置
  const circleRadius = 55 // 圆形半径，对应110rpx的直径
  const translateX = activeFlowTab.value * tabWidth + (tabWidth / 2) - circleRadius + offset // 居中定位，55rpx是圆形半径，加上偏移量
  
  // 调试信息
  console.log(`当前激活Tab: ${activeFlowTab.value}, 容器宽度: ${containerWidth.value}px, Tab宽度: ${tabWidth}px, 移动距离: ${translateX}px, 偏移量: ${offset}px`)
  
  return {
    transform: `translateX(${translateX}px) translateY(-50%)`, // 合并水平移动和垂直居中
    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
  }
})

// 流式动画Tab点击事件
const handleFlowTabClick = (index) => {
  activeFlowTab.value = index
  uni.showToast({
    title: `切换到: ${flowTabs.value[index].name}`,
    icon: 'none'
  })
}

// 基础Tab点击事件
const handleBasicTabClick = (index) => {
  activeBasicTab.value = index
  uni.showToast({
    title: `切换到: ${basicTabs.value[index].name}`,
    icon: 'none'
  })
}

// 图标Tab点击事件
const handleIconTabClick = (index) => {
  activeIconTab.value = index
  uni.showToast({
    title: `切换到: ${iconTabs.value[index].name}`,
    icon: 'none'
  })
}

// 滑动Tab点击事件
const handleScrollTabClick = (index) => {
  activeScrollTab.value = index
  uni.showToast({
    title: `切换到: ${scrollTabs.value[index].name}`,
    icon: 'none'
  })
}

// 底部Tab点击事件
const handleBottomTabClick = (index) => {
  activeBottomTab.value = index
  uni.showToast({
    title: `切换到: ${bottomTabs.value[index].name}`,
    icon: 'none'
  })
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 重置所有Tab
const handleReset = () => {
  activeFlowTab.value = 0
  activeBasicTab.value = 0
  activeIconTab.value = 0
  activeScrollTab.value = 0
  activeBottomTab.value = 0
  uni.showToast({
    title: '已重置所有Tab',
    icon: 'success'
  })
}

// 随机切换Tab
const handleRandom = () => {
  activeFlowTab.value = Math.floor(Math.random() * flowTabs.value.length)
  activeBasicTab.value = Math.floor(Math.random() * basicTabs.value.length)
  activeIconTab.value = Math.floor(Math.random() * iconTabs.value.length)
  activeScrollTab.value = Math.floor(Math.random() * scrollTabs.value.length)
  activeBottomTab.value = Math.floor(Math.random() * bottomTabs.value.length)
  uni.showToast({
    title: '已随机切换Tab',
    icon: 'success'
  })
}
</script>

<style>
/* Tab测试页面容器 */
.tab-test-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.header {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20rpx 40rpx;
  padding-top: 60rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
}

/* 主要内容 */
.content {
  flex: 1;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

/* 区块样式 */
.section {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 30rpx;
}

/* 流式动画Tab栏 */
.flow-tab-container {
  position: relative;
  display: flex;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: visible; /* 改为visible，让圆形背景可以超出 */
  width: 100%;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.flow-tab-indicator-container {
  position: absolute;
  top: 20%; /* 调整位置，让背景圆位于图标下面 */
  left: 0;
  width: 130rpx; /* 容器宽度等于白色背景的宽度 */
  height: 130rpx; /* 容器高度等于白色背景的高度 */
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-tab-indicator {
  position: absolute;
  top: 50%; /* 在容器中居中 */
  left: 50%; /* 在容器中居中 */
  transform: translate(-50%, -50%); /* 完全居中 */
  width: 110rpx; /* 蓝色圆形尺寸 */
  height: 110rpx; /* 蓝色圆形尺寸 */
  background: #007AFF;
  border-radius: 50%;
  z-index: 2; /* 确保在白色背景之上 */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.4); /* 增强阴影效果 */
}

.flow-tab-white-bg {
  position: absolute;
  top: 50%; /* 在容器中居中 */
  left: 50%; /* 在容器中居中 */
  transform: translate(-50%, -50%); /* 完全居中 */
  width: 130rpx; /* 白色背景比蓝色圆形稍大 */
  height: 130rpx; /* 白色背景比蓝色圆形稍大 */
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-tab-item {
  flex: 1;
  height: 140rpx; /* 增加高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40rpx; /* 增加图标和文字之间的间距，从16rpx改为20rpx */
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  padding: 20rpx 10rpx;
  border-radius: 20rpx; /* 添加圆角 */
  margin: 10rpx 5rpx; /* 添加外边距，为放大留空间 */
}

.flow-tab-item.active {
  color: #007AFF;
  transform: none; /* 移除整体移动效果 */
  margin: 10rpx 5rpx; /* 保持原来的外边距 */
  padding: 20rpx 10rpx; /* 保持原来的内边距 */
}

.flow-tab-item:not(.active) {
  color: #999999;
  background-color: transparent; /* 未激活时透明背景 */
}

.flow-tab-icon {
  font-size: 48rpx; /* 基础图标大小 */
  position: relative;
  z-index: 3;
  transition: all 0.3s ease; /* 保持图标的过渡动画 */
}

.flow-tab-item.active .flow-tab-icon {
  color: #ffffff;
  font-size: 46rpx; /* 增加图标大小，从48rpx改为56rpx */
  transform: translateY(-30rpx) scale(1.2); /* 增加向上移动距离，从-10rpx改为-20rpx */
}

.flow-tab-text {
  font-size: 24rpx;
  font-weight: 500;
  position: relative;
  z-index: 3;
  transition: none; /* 移除文字的所有过渡动画 */
}

.flow-tab-item.active .flow-tab-text {
  font-weight: 500; /* 保持原字重，不加粗 */
  font-size: 24rpx; /* 保持文字大小不变 */
  transform: none; /* 确保没有任何变换 */
}

/* 基础Tab栏 */
.tab-container {
  display: flex;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 4rpx;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  transition: all 0.3s ease;
}

.tab-item.active {
  background-color: #667eea;
  color: white;
}

.tab-text {
  font-size: 28rpx;
  font-weight: 500;
}

/* 图标Tab栏 */
.icon-tabs {
  background-color: #f8f9fa;
}

.icon-tab {
  flex-direction: column;
  height: 100rpx;
  gap: 8rpx;
}

.tab-icon {
  font-size: 32rpx;
}

/* 滑动Tab栏 */
.scroll-tab-container {
  margin-bottom: 20rpx;
}

.scroll-tabs {
  width: 100%;
  white-space: nowrap;
}

.scroll-tab-list {
  display: flex;
  padding: 0 20rpx;
}

.scroll-tab-item {
  padding: 20rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 20rpx;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.scroll-tab-item.active {
  background-color: #667eea;
  color: white;
}

.scroll-tab-text {
  font-size: 28rpx;
  font-weight: 500;
}

/* 底部Tab栏 */
.bottom-tab-container {
  display: flex;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.bottom-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 15rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.bottom-tab-item.active {
  background-color: #667eea;
  color: white;
}

.bottom-tab-icon {
  font-size: 36rpx;
}

.bottom-tab-text {
  font-size: 24rpx;
  font-weight: 500;
}

/* Tab内容 */
.tab-content {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 30rpx;
  min-height: 120rpx;
  display: flex;
  align-items: center;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

/* 操作按钮 */
.action-section {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  border: none;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn.primary {
  background-color: #667eea;
  color: white;
}

.action-btn.secondary {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
}
</style> 